﻿<template>
  <div class="category-container">
    <div class="category-search">
      <!-- 搜索栏 -->
      <avue-table-search
        :option="searchOption"
        v-model="categorySearchParams"
        @search-change="loadTableSearch"
        @search-reset="loadTableSearchReset"
      >
        <template #menu-after>
          <el-button>导出</el-button>
        </template>
      </avue-table-search>
    </div>
    <!-- 表格 -->
    <base-table-card>
      <template #header-right>
        <el-button type="primary" class="add-btn" @click="handleAddNewClass('add')">新增一级分类</el-button>
      </template>
      <avue-crud
        :option="tableOption"
        :data="tableData"
        :page="page"
        :table-loading="tableLoading"
        @refresh-change="loadTableSearch"
        @current-change="loadTablePageChange"
        @size-change="loadTablePageSizeChange"
      >
        <template #imgUrl="{ row }">
          <!-- <el-avatar :src="row.imgUrl" /> -->
          <el-image
            style="width: 60px; height: 60px; margin: 10px"
            :src="row.imgUrl"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[row.imgUrl]"
            show-progress
            :preview-teleported="true"
            fit="cover"
          />
        </template>

        <template #associationNum="{ row }">
          <el-button
            link
            type="primary"
            v-if="(!row.children || !row?.children?.length) && row.associationNum"
            @click="handleOpenRelatedModal(row, 'view')"
            >{{ row.associationNum }}</el-button
          >
          <el-text v-else type="primary">-</el-text>
        </template>

        <template #status="{ row }">
          <el-tag type="success" v-if="row.status === 1">已启用</el-tag>
          <el-tag type="info" v-else>已停用</el-tag>
        </template>

        <template #menu="{ row }">
          <el-popconfirm
            class="box-item"
            :title="
              row.status === 1
                ? '确定要停用该分类吗?停用后发布商品不能选择，租户端不能查看该分类及下面的商品。'
                : '确定要启用该分类吗?启用后发布商品能选择，租户端能查看该分类及下面的商品。'
            "
            @confirm="handleSwitch(row)"
          >
            <template #reference>
              <el-button link type="primary">{{ row.status === 1 ? "停用" : "启用" }}</el-button>
            </template>
          </el-popconfirm>
          <el-button link type="primary" @click="handleAddNewClass('edit', row)">编辑</el-button>
          <el-button
            link
            type="primary"
            v-if="row.classificationType === 1 || row.classificationType === 2"
            @click="handleAddNewClass('add', row)"
            >加下级</el-button
          >
          <el-button
            link
            type="primary"
            v-if="!row.children || !row?.children?.length"
            @click="handleOpenRelatedModal(row, 'add')"
            >关联商品</el-button
          >
          <!-- <el-button link type="primary">日志</el-button>  -->
          <el-popconfirm
            class="box-item"
            title="确定要删除该分类吗"
            placement="top-start"
            v-if="row.status !== 1"
            @confirm="handleDel(row.id)"
          >
            <template #reference>
              <el-button link type="primary">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </avue-crud>
    </base-table-card>
    <!-- 新增分类 -->
    <add-class-modal
      :show="addModalVisible"
      :current-info="currentData"
      :modal-type="modalType"
      @hide="handleAddHide"
      @confirm="handleAddHide"
    />
    <!-- 关联商品、查看商品 -->
    <related-products
      :visble="relatedVisble"
      :current-info="currentData"
      :modal-type="modalType"
      :category-data="categoryList"
      @hide="handleRelatedHide"
      @confirm="handleRelatedHide"
    />
  </div>
</template>

<script setup>
  import { searchOption, tableOption } from "@/crudOption/product-category/search.js";
  import AddClassModal from "./componets/AddClassModal.vue";
  import RelatedProducts from "./componets/RelatedProducts.vue";

  // 新增分类弹窗
  const addModalVisible = ref(false);
  // 关联商品、查看商品弹窗
  const relatedVisble = ref(false);
  // 查看类别
  const modalType = ref("");
  // 当前数据
  const currentData = ref({});
  // 商品类目
  const categoryList = ref([]);
  // 初始化
  onMounted(() => {
    loadGetTableData();
    loadCategroryData();
  });
  // 获取类目数据
  const loadCategroryData = () => {
    Api.product.getProductClassification().then(res => {
      categoryList.value = res.data;
    });
  };
  // 增删改查 hook
  let {
    data: tableData,
    loading: tableLoading,
    page: page,
    search: categorySearchParams,
    get: loadGetTableData,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.product.getClassification,
    getParamsFormat: params => {
      const searchParams = {
        ...params,
      };
      if (searchParams?.addDate?.length) {
        searchParams.startTime = `${params.addDate[0]} 00:00:00`;
        searchParams.endTime = `${params.addDate[1]} 23:59:59`;
      }
      if (searchParams?.editDate?.length) {
        searchParams.updateStartTime = `${params.editDate[0]} 00:00:00`;
        searchParams.updateEndTime = `${params.editDate[1]} 23:59:59`;
      }
      delete searchParams.addDate;
      delete searchParams.editDate;
      return searchParams;
    },
  });
  // 打开新增弹窗
  const handleAddNewClass = (type, info) => {
    if (info) {
      currentData.value = { ...info };
    } else {
      currentData.value = {};
    }
    modalType.value = type;
    addModalVisible.value = true;
  };
  // 关闭新增弹窗
  const handleAddHide = refresh => {
    addModalVisible.value = false;
    modalType.value = "";
    currentData.value = {};
    if (refresh) {
      loadTableSearch();
    }
  };
  // 打开关联商品、查看商品弹窗
  const handleOpenRelatedModal = (info, type) => {
    modalType.value = type;
    currentData.value = { ...info };
    nextTick(() => {
      relatedVisble.value = true;
    });
  };
  // 关联商品、查看商品弹窗关闭
  const handleRelatedHide = refresh => {
    relatedVisble.value = false;
    modalType.value = "";
    if (refresh) {
      loadGetTableData();
    }
  };
  // 启用、停用
  const handleSwitch = info => {
    Api.product.switchClassificationStatus({ id: info.id, status: info.status === 1 ? 0 : 1 }).then(() => {
      $msg.success("操作成功");
      loadTableSearch();
    });
  };
  // 删除
  const handleDel = id => {
    Api.product.delClassification({ id }).then(() => {
      $msg.success("操作成功");
      loadTableSearch();
    });
  };
</script>

<style lang="scss" scoped>
  .category-container {
    width: 100%;
    height: 100%;
    padding: 16px;
    .category-search {
      background-color: var(--fl7);
      border-radius: 12px;
    }
    .category-table {
      padding: 16px;
      background-color: var(--fl7);
      margin-top: 16px;
      .add-btn {
        margin-bottom: 16px;
      }
    }
    .category-status-open {
      color: #409eff;
    }
    .category-status-close {
      color: #f56c6c;
    }
  }
</style>
